<template>
<div class="wrap">

  <el-tabs v-model="activePanel" type="card" @tab-click="handleClick" class='tabPanel'>
    <el-tab-pane label="待评估病人" name="pending">

      <div class="filter-container">
        <div class= 'filterBox'>
          <div class='leftPart filterPart'>
          </div>
          <div class='rightPart filterPart'>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter.type">
              <el-option label="患者姓名" value="type0"></el-option>
              <el-option label="手机号后四位" value="type1"></el-option>
              <el-option label="就诊卡号" value="type2"></el-option>
            </el-select>
            <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter.keyWord">
            </el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </div>
        </div>
      </div>
      <complex-table :columnsType = '"index"' :list = 'tableList1' :totalList = 'totalList1' :theadList = "hospitalAssessmentConst.theadList1" :operationButtons = 'hospitalAssessmentConst.operationButtons1'  @getListByPagination = 'getListByPagination' @initListQuery = 'initListQuery'></complex-table>
    </el-tab-pane>

    <el-tab-pane label="已评估病人" name="done">
      <div class="filter-container">
        <div class= 'filterBox'>
          <div class='leftPart filterPart'></div>
          <div class='rightPart filterPart'>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter2.type">
              <el-option label="患者姓名" value="type0"></el-option>
              <el-option label="手机号后四位" value="type1"></el-option>
              <el-option label="就诊卡号" value="type2"></el-option>
            </el-select>
            <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter2.keyWord">
            </el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter2">搜索</el-button>
          </div>
        </div>
      </div>
      <complex-table :columnsType = '"index"' :list = 'tableList2' :totalList = 'totalList2' :theadList = "hospitalAssessmentConst.theadList2" :operationButtons = 'hospitalAssessmentConst.operationButtons2' @getListByPagination = 'getListByPagination2' @operationEvent0 = 'operationEvent1_0' @initListQuery = 'initListQuery'></complex-table>
    </el-tab-pane>

  </el-tabs>

</div>
</template>
<script>
  import complexTable from '@/views/table/complexTable'
  import waves from '@/directive/waves/index.js'
  import { hospitalAssessmentConst } from '@/yimiviews/patientManage/columnsConst'
  import { dischargeAssessmentList } from '@/api/patientManage/patientManage'
  export default {
    components: { complexTable },
    data() {
      return {
        hospitalAssessmentConst,
        filter: {
          keyWord: '',
          type: 'type0'
        },
        filter2: {
          keyWord: '',
          type: 'type0'
        },
        activePanel: 'pending',
        dialogLeftTop1_1: false,
        dialogLeftTop1_2: false,
        formLabelWidth: '120px',
        filterContainer: {},
        tableList1: [],
        tableList2: [],
        totalList1: 0,
        totalList2: 0,
        listQuery: {
          page: 1,
          limit: 5
        },
        listQuery2: {
          page: 1,
          limit: 5
        }
      }
    },
    mounted() {
      this.getTableList1(this.listQuery)
      this.getTableList2(this.listQuery2)
    },
    methods: {
      initListQuery(listQuery) {
        this.listQuery.limit = listQuery.limit
        this.listQuery.page = listQuery.page
        this.listQuery2.limit = listQuery.limit
        this.listQuery2.page = listQuery.page
      },
      handleFilter() {
        this.getTableList1(this.listQuery)
      },
      handleFilter2() {
        this.getTableList2(this.listQuery2)
      },
      handleClick(tab, event) {
      },
      getListByPagination(listQuery) {
        this.listQuery = listQuery
        this.getTableList1(listQuery)
      },
      getTableList1(listQuery) {
        const query = Object.assign({}, listQuery, this.filter)
        var data = {}
        data.current = query.page
        data.size = query.limit
        data.assessment = false
        if (query != null) {
          var keyWord = query.keyWord === null || query.keyWord === '' ? null : query.keyWord
          if (query.type === 'type0') {
            data.patientName = keyWord
          } else if (query.type === 'type1') {
            data.phoneFour = keyWord
          } else {
            data.visitCard = keyWord
          }
        }
        dischargeAssessmentList(data).then((res) => {
          console.log(res.data)
          this.tableList1 = res.data.list
          this.totalList1 = res.data.total
        })
      },
      getListByPagination2(listQuery) {
        this.listQuery2 = listQuery
        this.getTableList2(listQuery)
      },
      getTableList2(listQuery) {
        const query = Object.assign({}, listQuery, this.filter2)
        var data = {}
        data.current = query.page
        data.size = query.limit
        data.assessment = true
        if (query != null) {
          var keyWord = query.keyWord === null || query.keyWord === '' ? null : query.keyWord
          if (query.type === 'type0') {
            data.patientName = keyWord
          } else if (query.type === 'type1') {
            data.phoneFour = keyWord
          } else {
            data.visitCard = keyWord
          }
        }
        dischargeAssessmentList(data).then((res) => {
          // this.listLoading = false
          this.tableList2 = res.data.list
          this.totalList2 = res.data.total
        })
      },
      operationEvent1_0(row) {
        this.formLeftTop1 = Object.assign({}, row)
        this.dialogLeftTop1_1 = !this.dialogLeftTop1_1
      }
    },
    computed: {
      APPLICANT_NAME() {
        this.dialogLeftTop1_1_data.applicant = this.$store.getters.name
        return this.$store.getters.name
      }
    },
    directives: {
      waves
    }
  }
</script>
<style lang="scss">
  .tabPanel{
    padding-top: 10px;
    height: 100%;
    background-color: #fff;
    overflow: auto;
    .el-tabs__header{
      padding-left: 20px;
    }
  }
  .filterBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .filterPart{
      line-height: 2;
    }
  }
</style>
